<template>
  <div class="header">
    <nav>
      <ul>
        <!-- <li><router-link to="/">首页</router-link></li>
        <li v-if="userStore.isAuthenticated"><router-link to="/todolist">待办事项列表</router-link></li>
        <li v-if="userStore.isAuthenticated"><a @click="logout">注销</a></li>
        <li v-else><router-link to="/login">登录</router-link></li>
        <li><router-link to="/cv">简介</router-link></li>
        <li><router-link to="/test">测试</router-link></li>
        <li><a href="https://gitee.com/tongbu1431183740/gray_-wind-s-reservoir" target="_blank">仓库</a></li> -->
        <el-link><router-link to="/">首页</router-link></el-link>
        <el-link v-if="userStore.isAuthenticated"><router-link to="/todolist">待办事项列表</router-link></el-link>
        <el-link v-if="userStore.isAuthenticated" type="warning"><router-link to="/cv">简介</router-link></el-link>
        <el-link v-if="userStore.isAuthenticated" type="danger"><router-link to="/test">测试</router-link></el-link>
        <el-link v-if="userStore.isAuthenticated" type="danger"><router-link to="/coursegrades">课程成绩</router-link></el-link>
        <el-link v-if="userStore.isAuthenticated" type="danger"><router-link to="/personalgrades">个人成绩</router-link></el-link>
        <el-link type="info"><a href="https://gitee.com/tongbu1431183740/gray_-wind-s-reservoir" target="_blank">仓库</a></el-link>
        <el-link v-if="userStore.isAuthenticated"><a @click="logout">注销</a></el-link>
        <el-link v-else><router-link to="/login">登录</router-link></el-link>
      </ul>
    </nav>
  </div>
</template>

<script setup lang="ts">
import { useUserStore } from '../stores/user';
import { useRouter } from 'vue-router';

const userStore = useUserStore();
const router = useRouter();

const logout = () => {
  userStore.logout();
  router.push('/');
};
</script>

<style scoped>
.el-link {
  margin-right: 16px;
  font-size: 20px;
}
.header {
  width: 100%;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 0;
  left: 0;
  background-color: white;
  z-index: 100;
}

nav .el-link a {
  text-decoration: none;
  color: #2c3e50;
  font-weight: 500;
  transition: color 0.3s;
}

nav .el-link a:hover {
  color: #392ff2;
}

nav .el-link a.router-link-exact-active {
  color: #42b983;
  font-weight: 600;
}
</style>